<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="apply-wrap">
		<view class="tab">
			<view :class=" { 'tab-title':true, 'active': current==1}" @click="current=1">
				访客预约
			</view>
			<view :class=" { 'tab-title':true, 'active':current==2}" @click="current=2">
				预约记录
			</view>
			<view :class=" { 'tab-title':true, 'active':current==3}" @click="current=3">
				访客审批
			</view>
		</view>
		<view class="tab-content">
			<applyForm v-show="current==1" />
			<applyHistory v-show="current == 2" />
			<approveList v-show="current == 3"></approveList>
		</view>

	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import applyForm from "./applyForm.vue"
	import applyHistory from "./applyHistory.vue"
	import approveList from './approveList.vue'
	export default {
		components: {
			applyForm,
			applyHistory,
			approveList
		},
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				current: 1				
			}
		},
		onLoad(option) {
			console.log(option)
			if (option && option.current) {
				this.current = option.current		
			}
		},
		mounted() {
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	
	.apply-wrap {
		display: flex;
		justify-content: space-between;
		flex-direction: column;

		.tab {
			font-size: 32rpx;
			display: flex;

			.tab-title {
				text-align: center;
				border-bottom: 10rpx solid #EEEEEE;
				padding: 14rpx 28rpx;
				width: 50%;
			}

			.tab-title.active {
				color: $theme-color;
			}

		}
	}
	
	
</style>
